<template>
	<view class="content">
		<u-swiper :list="sideshows" indicator indicatorMode="line" circular></u-swiper>
		<u-gap height="10"></u-gap>
		<u-search shape="round" placeholder="输入您想搜索的商品名称" v-model="keyword" @custom="searchGoods" @search="searchGoods">
		</u-search>
		<view class="text_center">
			<u-tabs lineWidth='30' itemStyle="padding-left: 25px;padding-right: 15px; height: 34px;" :list="tabs"
				@click="tabscilck"></u-tabs>
		</view>
		<u-row customStyle="margin-bottom: 10px;flex-wrap: wrap;" justify="space-between" gutter="17">
			<u-col span="6" v-for="item in indexGoods">
				<navigator class="u-border goods-item" :url="'/pages/index/showGoods/showGoods?id='+item.goodsId">
					<u--image width='100%' height="300rpx" :src="item.goodsImage">
						>
					</u--image>
					<view class="u-flex u-line-2">
						<view style="font-style: italic;">{{item.goodsName}}</view>
						<view style="color: brown;;">¥{{item.goodsPrice==0?'免费':item.goodsPrice}}</view>
					</view>
				</navigator>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getGoodsByType
	} from 'config/api.js';
	export default {

		data() {
			return {
				sideshows: [
					'https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'https://images.pexels.com/photos/163036/mario-luigi-yoschi-figures-163036.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'https://images.pexels.com/photos/3411134/pexels-photo-3411134.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'https://images.pexels.com/photos/10435718/pexels-photo-10435718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
				],
				tabs: [{
						name: '推荐'
					},
					{
						name: '玩具'
					},
					{
						name: '动漫'
					},
					{
						name: '书籍'
					},
					{
						name: '电子'
					},
					{
						name: '其它'
					}
				],
				indexGoods: [],
				keyword: ''

			}
		},
		onLoad() {
			//发起请求
			this.getAllGoods()
		},
		methods: {
			getAllGoods() {
				getGoodsList({}).then((res) => {
					this.indexGoods = res.data
					console.log(res.data);
				}).catch(() => {

				})
			},
			tabscilck(item) {
				if (item.name == '推荐') {
					this.getAllGoods()
				} else {
					let type = item.name;

					uni.$u.http.get('/serviceUser/app_goods/getGoodsByType', {
						params: {
							type: type
						},
					}).then(res => {
						console.log(res);
						this.indexGoods = res.list
					}).catch((error) => {
						console.log(error);
					})
				}

				/* 
				getGoodsByType({}, {
					params: {
						type: type
					}
				}).then(res => {
					console.log(res);
				}).catch(() => {

				}) */
			},
			searchGoods() {
				if (this.keyword == '') {
					uni.$u.toast("搜索内容不能为空")
				} else {
					uni.$u.http.get('/serviceUser/app_goods/getGoodsByName', {
						params: {
							name: this.keyword
						},
					}).then(res => {
						console.log(res);
						this.indexGoods = res.list
					}).catch((error) => {
						console.log(error);
					})
				}

			}


		}
	}
</script>

<style lang="scss">
	.putall {
		height: 100%;
		width: 100%;
	}

	.text_center {
		text-align: center;
	}

	.goods-item {
		margin-top: 10rpx;
		padding: 40rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, .1);
	}
</style>
